<template>
  <div class="com-pc-search-bar-sel-key">
    <el-input
      v-model="keyStr"
      size="small"
      placeholder="请输入内容"
      class="search-input"
      @keyup.enter.native="searckBtnClick"
      clearable>
      <el-select
        v-if="options.length"
        slot="prepend"
        v-model="type"
        style="width: 75px">
        <el-option
          v-for="(v, k) in options"
          :key="k"
          :label="v"
          :value="`${k}`"/>
      </el-select>
      <el-button
        slot="append"
        icon="el-icon-search"
        @click="searckBtnClick"/>
    </el-input>
  </div>
</template>

<script>
  export default {
    name: "ComPcSearchBarSelKey",
    props: {
      /**
       * 所有选项
       */
      options: {
        type: Array,
        default() {
          return []
        }
      }
    },
    data() {
      return {
        /**
         * 关键字
         */
        keyStr: '',
        /**
         * 选中的类型
         */
        type: '0'
      }
    },
    methods: {
      /**
       * 搜索按钮点击
       */
      searckBtnClick() {
        this.$emit('search', this.type, this.keyStr)
      }
    }
  }
</script>

<style lang="scss" scoped>
.com-pc-search-bar-sel-key {

}
</style>
